<template>
    <el-button style="margin-top: 20px; width: 200px; margin-left: 20px" type="primary" @click="startFlowList()">发起流程</el-button>

    <div class="myTodoFlowList" v-loading="globalLoading">
        <el-collapse @change="handleChange" accordion>
            <el-collapse-item v-for="item in myTodoList" :key="item.id" :name="item.id">
                <template #title>
                    <span style="font-size: 18px; color: #037cde; margin-right: 20px">{{item.flowNameCn + ' - ' + item.flowNameEn}}</span>
                    <el-tag type="primary">{{ item.instanceCount }}</el-tag>
                </template>
                <div v-loading="tableLoading">
                    <el-table
                        :data="flowInstanceList"
                        style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                        row-key="id"
                        :show-overflow-tooltip="true"
                        class="tableContainer"
                        max-height="70vh"
                    >
                        <el-table-column prop="id" label="流程实例ID" />
                        <el-table-column prop="flowId" label="流程ID" />
                        <el-table-column prop="flowVersion" label="流程版本" />
                        <el-table-column prop="currentNode" label="当前结点ID" />
                        <el-table-column prop="currentAssignee" label="当前处理人" />
                        <el-table-column prop="startBy" label="发起人" />
                        <el-table-column prop="createDate" label="发起时间" />
                        <el-table-column prop="formInstanceId" label="表单实例ID" />
                        <el-table-column align="center" :width="300">
                            <template #header>
                                <span>操 作</span>
                            </template>
                            <template #default="scope">
                                <el-button type="primary" size="small" @click="taskComplete(scope.row)">
                                    审 批
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </el-collapse-item>
        </el-collapse>
    </div>

    <div>
        <el-dialog
            v-model="startFlowListDialogFlag"
            title="发起流程"
            width="50%"
            :close-on-click-modal="false"
        >
            <div v-loading="queryStartFlowListLoading">
                <el-card style="width: 180px; display: inline-block; margin-right: 20px; margin-top: 10px" v-for="item in canStartFlowList" :key="item.id"
                         shadow="hover" class="cardClass" @click="clickCard(item)">
                    <span> {{item.nameCn}}</span>
                </el-card>
            </div>

        </el-dialog>
    </div>
</template>

<script name="MyToDoInstanceList" setup>
import {queryFlowPageList, queryMyTodoInstanceList, queryMyTodoList} from "@/request/flow";
import {ref} from "vue";
import {useRouter} from "vue-router";

let router = useRouter();

let startFlowListDialogFlag = ref(false);
let canStartFlowList = ref([]);
let queryStartFlowListLoading = ref(false);
let myTodoList = ref([]);
let flowInstanceList = ref([]);
let tableLoading = ref(false);
let globalLoading = ref(false);

init();
function init() {
    // 查询代办列表
    queryStartFlowListLoading.value = false
    globalLoading.value = true;
    queryMyTodoList({}).then(res => {
        if (res.code === "200") {
            myTodoList.value = res.data;
        }
        globalLoading.value = false;
    }).catch(res => {
        globalLoading.value = false;
    })
}

function startFlowList() {
    canStartFlowList.value = []
    startFlowListDialogFlag.value = true
    queryStartFlowListLoading.value = true
    let param = {
        pageInfo: {
            pageIndex: 1,
            pageSize: 9999
        },
        status: "ONLINE"
    }
    // 查询所有可发布的流程
    queryFlowPageList(param).then(res => {
        canStartFlowList.value = res.data.dataList;
        queryStartFlowListLoading.value = false;
    }).catch(res => {
        queryStartFlowListLoading.value = false;
    })
}

function clickCard(item) {
    queryStartFlowListLoading.value = true;
    // 点击卡片，跳转到发起流程界面
    let realRoute = router.resolve({
        path: "/flow-todo/ywuFlowTodoListHome/ywuFlowStartInstance",
        query: {id: item.id}
    });
    window.open(realRoute.href, `_blank`)
    queryStartFlowListLoading.value = false;
    startFlowListDialogFlag.value = false;
}

function handleChange(activeNames) {
    flowInstanceList.value = []
    tableLoading.value = true
    // 查询实例代办列表
    queryMyTodoInstanceList({flowId: activeNames}).then(res => {
        if (res.code === "200") {
            flowInstanceList.value = res.data;
        }
        tableLoading.value = false;
    }).catch(res => {
        tableLoading.value = false;
    })
}

function taskComplete(row) {
    // 跳转路由
    let realRoute = router.resolve({
        path: '/flow-todo/ywuFlowTodoListHome/ywuFlowCompleteInstance',
        query: {id: row.id, taskId: row.taskId}
    })
    window.open(realRoute.href, `_blank`)
}
</script>

<style scoped lang="less">
.cardClass:hover{
    cursor: pointer;
}

.myTodoFlowList {
    margin-top: 30px;
    margin-left: 20px;
}
</style>